<template>
  <div class='main'>
       <img src="../../assets/img/backblack.png" alt="" class="back"  @click="go('LifeService')">
      <div class='top'>
          <img src="../../assets/img/banner2.png" alt="">
         
      </div>
      <div class="slogan">
          <span class="youhui">优惠</span>
          <span class="song">首次充值100送200</span>
          <span class="cz" @click="go('chargecard')">立即充值<img src="../../assets/img/go.png" alt=""></span>
      </div>
      <div class="jieshao">
          <van-grid :border="false" :column-num="1">
  <van-grid-item>   
    <div class="content">
    <span>宜居维修</span>
    <span>您的专享在线报修</span>
    <span>10元起</span>
    </div>
    <img src="../../assets/img/ayi.png" alt="">
  </van-grid-item>
  <van-grid-item>
      <div class="content">
    <span>空调清洗</span>
    <span>提供柜式、挂式空调的拆机清洗服务</span>
    <span>100元起</span>
    </div>
    <img src="../../assets/img/lady.png" alt="">
  </van-grid-item>
  <van-grid-item>   
    <div class="content">
    <span>宜居维修</span>
    <span>您的专享在线报修</span>
    <span>10元起</span>
    </div>
    <img src="../../assets/img/ayi.png" alt="">
  </van-grid-item>
  <van-grid-item>
      <div class="content">
    <span>空调清洗</span>
    <span>提供柜式、挂式空调的拆机清洗服务</span>
    <span>100元起</span>
    </div>
    <img src="../../assets/img/lady.png" alt="">
  </van-grid-item>
</van-grid>
      </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  watch: {

  },
  props: {
  },
  components: {

  },
  computed: {

  },
  mounted() {

  },
  methods: {
 go(page) {
      this.$router.replace({ name: page });
    },
  },
  filters: {

  }
}
</script>

<style scoped lang='less'>
    .main{
        width: 100%;
        height: 100%;
        background-color: #ebebeb;
        .back{
                width: 48px;
                height: 48px;
                position: absolute;
                left: 20px;
                top: 60px;
            }
        .top{
            
            img{
                width: 100%;
                height: 475px;
                display: block;
            }
        }
        .slogan{
            font-size: 30px;
            margin: 32px 20px ;
            .youhui{
                padding: 5px 10px;
                border: 1px solid #ff5555;;
                border-radius: 8px;
               color: #ff5555;            
            }
            .song{
                margin-left: 10px;
            }
            .cz{
                margin-left: 200px;
                a:visited{
                    color: #000;
                }
                 img{
                     margin-left: 12px;
                        width: 34px;
                        height: 34px;        
                        vertical-align: text-top              
                    }
            }
        }
        .jieshao{
            /deep/.van-grid-item__content{
                background-color: #ebebeb;
                padding:0 20px 20px;
                .content{
                    position: absolute;
                    span{
                        display: block;
                        margin: 0;
                    }
                    span:nth-child(1){
                        opacity: 0.8;
                        font-size: 35px;
                        position: relative;
                        left: 140px;
                        top: -10px;
                    }
                    span:nth-child(2){
                        opacity: 0.7;
                        font-size: 10px;
                        width: 400px;
                        position: relative;
                        left: 140px;
                        top: 10px;
                    }
                    span:nth-child(3){
                        color: #ff5555;
                        font-size: 30px;
                        width: 120px;
                        position: relative;
                        left: 420px;
                        top: 25px;
                    }
            }
                img{
                width: 100%;
                height: 100%;
            }
            }
            
        }
    }
</style>